<template>
  <ul id='menu-primary' class="menu">
    <template v-for='item in navList' :key='item.id'>
      <li class='menu-item-dept-1'>
        <a :title="item.attribute" rel="button">{{ item.name }}</a>
        <SubMenu :routes='item.parent'></SubMenu>
      </li>
    </template>
  </ul>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
import api from '@/api/api'
import { Controls } from '@/components/Header'
import SubMenu from '@/components/Header/src/SubMenu.vue'
import { animateDelayedElements } from '@/utils/animateDelay'

export default defineComponent({
  name: 'Navigation',
  components: { SubMenu, Controls, Dropdown, DropdownMenu, DropdownItem },
  setup() {
    const reactiveData = reactive({
      navList: [] as any
    })
    onMounted(() => {
      api.getNavList().then(({ data }) =>{
        reactiveData.navList=data.data
      })
    })
    return {
      ...toRefs(reactiveData),
    }
  },
  watch:{
    navList:function() {
      this.$nextTick(()=>{
        animateDelayedElements('.menu-out > .menu > li > ul', '.menu-out > .menu > li > ul > li', 0)
      })
    }
  }
})
</script>
